<template>
  <a-breadcrumb :routes="routes">
    <template slot="itemRender" slot-scope="{route}">
      <span>{{route.title}}</span>
      <!-- <span v-if="routes.indexOf(route) === routes.length - 1">{{route.title}}</span> -->
      <!-- <router-link v-else :to="route.path">{{route.title}}</router-link> -->
    </template>
  </a-breadcrumb>
</template>

<script>
export default {
  name: "PageHeader",
  data() {
    return {
      routes: []
    };
  },
  created() {
    this.getRoutes();
  },
  methods: {
    getRoutes() {
      let matche = this.$route.matched;
      var _routes = [];
      for (let i in matche) {
        _routes.push({
          path: matche[i].path,
          name: matche[i].name,
          icon: matche[i].meta.icon,
          title: matche[i].meta.title
        });
      }
      this.$set(this, "routes", _routes);
    }
  },
  watch: {
    $route(to, from) {
      //如果路由跳转的菜单不是被隐藏的,则展开当前跳转菜单的父菜单
      this.getRoutes();
    }
  }
};
</script>